<template>
	<view class="content">
		<image :src="shareImage" class="borderR" :class="[isShop?'share-image2':'share-image']" mode="aspectFit"></image>
		<canvasDrawer :painting="painting" class="canvasdrawer" @getImage="eventGetImage"/>
		<button class="calc btn themeBgColor" @click="eventSave">保存到本地</button>
		<image src="/static/images/icon/close.png" class="closeBtn" @click="eventCancel" v-if="!isShop"></image>
		<!-- <button class="calc btn2" @click="eventCancel" v-if="!isShop">取消</button> -->
	</view>
</template>

<script>
	import util from '@/common/util.js'
	import base64Src from '@/common/base64Src.js'
	import generateImg from '@/common/generateImg.js'
	import canvasDrawer from './uniapp-canvas-drawer.vue'
	import {mapState} from 'vuex'
	export default {
		components:{canvasDrawer},
		data() {
			return {
				painting: {},
				shareImage: '',
				codeImg: '',
			}
		},
		props:['shareType','list','isShop'],
		computed:{
			...mapState(['userInfo']),
		},
		onLoad() {

		},
		methods: {
			eventDraw () {
				console.log(this.list);
			    uni.showLoading({
					title: '正在生成海报...',
					mask: true
			    })
			    this.painting = generateImg.getImg(this.shareType,this.userInfo,this.list,this.codeImg,this.global.redColor)
			},
			eventSave () {
				var that = this
				uni.getSetting({
				    success: res => {
				        console.log(res)
				        if (!res.authSetting['scope.writePhotosAlbum']){
							uni.authorize({
								scope:'scope.writePhotosAlbum',
								success() {
								  console.log('授权成功')
								}
							})
				        }else{
							uni.saveImageToPhotosAlbum({
								filePath: that.shareImage,
								success (res) {
									console.log(res);
									that.$emit('saveImage')
									util.showToast('success','保存图片成功')
								},
								fail(err) {
									if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
										util.showModalAll('提示','请重新授权保存相册',()=>{
											uni.openSetting({
												success(data) {
													if (data.authSetting['scope.writePhotosAlbum']) {
														util.showModalAll('提示','获取权限成功,点击确定即可保存图片',()=>{
															that.eventSave()
														})
													} else {
														util.showModal('提示','获取权限失败，将无法保存到相册哦~')
													}
												}
											})
										})
									}
								}
								
							})
						}
				    }
				})
			    
			},
			eventGetImage(event) {
				// console.log(event);
				uni.hideLoading()
				// const { tempFilePath, errMsg } = event.detail
				// const result = event.detail.__args__
				// const tempFilePath = result[0].tempFilePath
				// const errMsg = result[0].errMsg
				// const tempFilePath = event.tempFilePath
				// const errMsg = event.errMsg
				if (event.errMsg === 'canvasdrawer:ok') {
					this.shareImage = event.tempFilePath
					this.painting = {}
				}
			},
			eventCancel(){
				this.shareImage = ''
				this.painting = {}
				if(!this.isShop){
					this.$emit('cancel','img')
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.content{
		position: relative;
	}
	.closeBtn{
		@include widthHeight(32rpx);
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		z-index: 1;
	}
	.share-image {
		@include widthHeight(600rpx,854rpx);
		@include margin(0 auto);
	}
	.share-image2 {
		@include widthHeight(690rpx,1000rpx);
		@include margin(0 auto);
	}
	.calc{
		width: calc(100% - 150rpx);
		margin: 0 auto;
	}
	.btn{
		@include width(600rpx);
		@include borderR(30rpx);
		@include margin(30rpx,'top');
	}
	// .btn2{
	// 	@include width(600rpx);
	// 	@include backG;
	// 	@include border(2rpx,$blackColor);
	// 	@include borderR(0)
	// }
</style>
